<template>
    <div class="things">
        <div class="things_do">
            <div class="things_do_item">
                <div class="things_do_item_title">流程名称</div>
                <el-input placeholder="请输入流程名称"></el-input>
            </div>
            <div class="things_do_item">
                <div class="things_do_item_title">任务节点</div>
                <el-input placeholder="请输入任务节点"></el-input>
            </div>
            <div class="things_do_item">
                <el-button type="primary">查询</el-button>
                <el-button>重置</el-button>
            </div>
        </div>
        <div class="things_content" v-loading="loading">
            <el-table stripe :data="tableData" style="width: 100%">
                <el-table-column align="center" type="index" label="序号">
                </el-table-column>
                <el-table-column prop="processName" label="流程名称">
                    <template slot-scope="scope">
                        <span
                            @click="handleThings(scope.row)"
                            style="color: #5b90ff; cursor: pointer"
                            >{{ scope.row.processName }}</span
                        >
                    </template>
                </el-table-column>
                <el-table-column
                    v-if="type !== '3'"
                    prop="startUserName"
                    label="发起人"
                >
                </el-table-column>
                <el-table-column
                    v-if="type !== '3'"
                    prop="name"
                    label="任务节点"
                >
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间">
                </el-table-column>
                <el-table-column
                    prop="status"
                    width="120px"
                    align="center"
                    label="状态"
                >
                    <template slot-scope="scope">
                        <el-tag
                            :type="
                                scope.row.status === '进行中'
                                    ? 'primary'
                                    : 'success'
                            "
                            >{{ scope.row.status }}</el-tag
                        >
                    </template>
                </el-table-column>
                <el-table-column prop="instanceName" label="备注">
                </el-table-column>
                <!-- <el-table-column align="center" label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              @click="handleDelete(scope.row)"
              style="color: #f56c6c"
              type="text"
              size="small"
              >删除</el-button
            >
          </template>
        </el-table-column> -->
            </el-table>
        </div>
        <el-pagination
            class="table-pagination"
            style="margin-top: 10px"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        >
        </el-pagination>
    </div>
</template>

<script>
import {
    getTodoList,
    getDoneList,
    getMyselfList,
    getFormData,
} from "@/api/model/task.js";
export default {
    props: ["type"],
    data() {
        return {
            tableData: [],
            currentPage: 1,
            pageSize: 10,
            total: 0,
            ProcessVisible: false,
            previewData: null,
            previewModelData: null,
            loading: true,
        };
    },
    computed: {
        businessDrawer() {
            return this.$store.state.workflow.businessDrawer;
        },
    },
    watch: {
        type: {
            handler(val) {
                if (val !== "4") {
                    this.getData();
                }
            },
            immediate: true,
        },
        businessDrawer(val) {
            if (!val) {
                this.getData();
            }
        },
    },
    methods: {
        async getData() {
            this.loading = true;
            try {
                this.tableData = [];
                let res = null;
                if (this.type === "1") {
                    res = await getTodoList({
                        limit: this.pageSize,
                        page: this.currentPage,
                    });
                } else if (this.type === "2") {
                    res = await getDoneList({
                        limit,
                        page,
                    });
                } else if (this.type === "3") {
                    res = await getMyselfList({
                        limit,
                        page,
                    });
                }
                if (res.code === 200) {
                    const { records } = res.data;
                    if (this.type !== "3") {
                        records.map((item) => {
                            if (item.taskName.includes("$@")) {
                                let list = item.taskName.split("$@");
                                list.pop();
                                item.name = list.join("");
                            } else {
                                item.name = item.taskName;
                            }
                        });
                    }
                    this.tableData = records;
                    this.total = res.data.total;
                    this.loading = false;
                }
            } catch (error) {
                this.loading = false;
            }
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.getData();
        },
        handleSizeChange(val) {
            this.pageSize = val;
            this.getData();
        },
        handleDelete(row) {},
        //事务处理
        async handleThings(row) {
            let res = await getFormData({ instanceId: row.instanceId });
            if (res.code === 200) {
                const config = {
                    ...row,
                    formData: JSON.parse(res.msg),
                    modelData: JSON.parse(row.modelData),
                };
                const task =
                    this.type === "1"
                        ? "task-todo"
                        : this.type === "2"
                        ? "task-done"
                        : "task-myself";
                this.$store.dispatch("workflow/setModel", {
                    config,
                    type: task,
                    taskId: row.taskId,
                });
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.things {
    margin-top: 10px;
    .things_do {
        display: flex;
        .things_do_item {
            margin-left: 20px;
            display: flex;
            align-items: center;
            .things_do_item_title {
                width: 80px;
                font-size: 14px;
            }
        }
    }
    .things_content {
        margin-top: 20px;
    }
}
</style>
